<template>
  <footer class="page-footer">
    <div class="page-contact">
      <div>
        {{ $t(`home.footer.email`) }}
        <a href="mailto:hey_cool@163.com">hey_cool@163.com</a>
      </div>
      <div>{{ $t(`home.footer.local`) }}</div>
    </div>
    <div>
      <ul class="page-more">
        <li v-for="(item, index) in serverArr" :key="item.menu">
          <nuxt-link :to="'/info/' + item.menu">{{
            userLang === 'en' ? item.title_en : item.title
          }}</nuxt-link>
          <!--   <block v-if="index !== serverArr.length - 1">|</block> -->
        </li>
      </ul>
    </div>
    <div class="page-copyright">
      <div>{{ $t(`home.footer.copyright`) }}</div>
      ICP备案号
      <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
        >2022020202</a
      >
      <div class="net-police">
        <img src="/images/gan.png" alt="" />
        川公网安备
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51019002001540"
        >
          51000000000000号
        </a>
      </div>
    </div>
  </footer>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
// //语言

const userLang = userLangeages()

const { t, locale } = useI18n()

const serverArr = [
  {
    menu: 'news',
    title: '新闻资讯',
    title_en: 'NEWS',
  },
  {
    menu: 'service',
    title: '服务条款',
    title_en: 'Terms Of Service',
  },
  {
    menu: 'privicy',
    title: '隐私政策',
    title_en: 'Privacy Policy',
  },
  {
    menu: 'others',
    title: '其它业务',
    title_en: 'Other Service ',
  },
]
</script>
<style lang="scss" scoped>
.page-more {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 2.58;
  li {
    display: inline-block;
    padding: 10px;
    a {
      padding-right: 15px;
      color: #666;
      &:hover {
        color: #c50918;
      }
    }
  }
}
.page-contact {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  line-height: 2;
  a {
    color: #000;
  }
}
.page-copyright {
  padding: 20px 0 60px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #666;
  line-height: 1.6;
  letter-spacing: 0.7px;
  a {
    color: #666;
    &:hover {
      color: #c50918;
    }
  }
}
.net-police {
  padding: 5px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
